import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { View, Textarea, Input, Form, Button } from "@tarojs/components-rn";
import { AtImagePicker } from 'taro-ui';
import { inject, observer } from "@tarojs/mobx-rn";
import { getRuntime, isPhone } from "../../utils/common";
import welfare_applyStyleSheet from "./welfare_apply_styles";
var _styleSheet = welfare_applyStyleSheet;

let Index = class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      phoneNumber: '',
      logoImg: [],
      logoImgSave: '',
      publicWelfaresBanner: [],
      publicWelfaresBannerSave: '',
      introduce: '',
      description: '',
      amountOfApplication: ''
    };
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '申请资助' });
  }
  handelRouter(url = '/pages/index/index') {
    getRuntime().navigateTo(url);
  }
  onChangeImg(type, e) {
    getRuntime().uploadFile(e, urls => {
      this.setState({
        [type + 'Save']: urls.join(',')
      });
      getRuntime().showToast('上传图片成功~');
      // console.log(this.state[type+'Save'])
    });
    this.setState({
      [type]: e
    });
  }
  submit(e) {
    let { logoImgSave, publicWelfaresBannerSave } = this.state;
    let { name, phoneNumber, introduce, description, amountOfApplication } = e.detail.value;
    let { PublicWelfareStore } = this.props.stores;
    if (!name) {
      getRuntime().showToast('请填写姓名~');
      return;
    }
    if (!phoneNumber) {
      getRuntime().showToast('请填写联系电话~');
      return;
    }
    if (!isPhone(phoneNumber)) {
      getRuntime().showToast('联系电话格式不正确~');
      return;
    }
    if (!logoImgSave) {
      getRuntime().showToast('封面图片不能为空~');
      return;
    }
    if (!logoImgSave) {
      getRuntime().showToast('封面图片不能为空~');
      return;
    }
    if (!publicWelfaresBannerSave) {
      getRuntime().showToast('页面头部图片不能为空~');
      return;
    }
    if (!introduce) {
      getRuntime().showToast('简短描述信息不能为空~');
      return;
    }
    if (!description) {
      getRuntime().showToast('资助详情不能为空~');
      return;
    }
    PublicWelfareStore.savePublicWelfare({
      form: {
        name,
        phoneNumber,
        logoImg: logoImgSave,
        publicWelfaresBanner: publicWelfaresBannerSave,
        introduce,
        description,
        amountOfApplication
      },
      callback: res => {
        getRuntime().navigateTo('/pages/public_welfare/welfare_success');
      }
    });
  }
  render() {
    let { logoImg, publicWelfaresBanner } = this.state;
    return <View style={[_styleSheet["welfare-apply-from"], _styleSheet["from-wrap"]]}>
        <Form onSubmit={this.submit.bind(this)}>
          <View style={_styleSheet["item-group-title"]}>联系方式</View>
          <View style={[_styleSheet["item-group"], _styleSheet["pt0"], _styleSheet["pb0"]]}>
            <View style={_styleSheet["input-group"]}>
              <View style={[_styleSheet["input-name"], _styleSheet["is-require"]]}>姓名</View>
              <Input name="name" placeholderClass="placeholder_class" placeholder="请填写姓名" style={_styleSheet["from-input"]} />
            </View>

            <View style={_styleSheet["input-group"]}>
              <View style={[_styleSheet["input-name"], _styleSheet["is-require"]]}>联系电话</View>
              <Input name="phoneNumber" type={"number"} maxLength={11} placeholderClass="placeholder_class" placeholder="请填写联系电话" style={_styleSheet["from-input"]} />
            </View>

            <View style={[_styleSheet["input-group"], _styleSheet["is-require"]]}>
              <View style={[_styleSheet["input-name"], _styleSheet["is-require"]]}>资助金额</View>
              <Input type="number" name="amountOfApplication" placeholderClass="placeholder_class" placeholder="请填写资助金额(元)" style={_styleSheet["from-input"]} />
            </View>

            <View style={[_styleSheet["input-group"], _styleSheet["input-upload"]]}>
              <View style={[_styleSheet["input-name"], _styleSheet["is-require"]]}>上传封面图片(一张)</View>
              <AtImagePicker length={4} count={1} files={logoImg} name="logoImg" showAddBtn={logoImg.length < 1} onChange={this.onChangeImg.bind(this, 'logoImg')} />
            </View>

            <View style={[_styleSheet["input-group"], _styleSheet["input-upload"], _styleSheet["bbnone"]]}>
              <View style={[_styleSheet["input-name"], _styleSheet["is-require"]]}>上传页面头部图片</View>
              <AtImagePicker length={4} count={3} files={publicWelfaresBanner} name="publicWelfaresBanner" onChange={this.onChangeImg.bind(this, 'publicWelfaresBanner')} />
            </View>
          </View>

          <View style={_styleSheet["input-group"]}>
            <Textarea placeholderClass="placeholder-class" name="introduce" placeholder="请填写简短描述信息(必填)" style={_styleSheet["from-textarea"]} />
          </View>

          <View style={_styleSheet["interval"]} />


            <Textarea placeholderClass="placeholder-class" name="description" placeholder="请填写您的资助情况(必填)" maxlength={-1} style={_styleSheet["from-textarea"]} />

           


          <View style={_styleSheet["btn-group"]}>
            <Button formType={"submit"} style={[_styleSheet["btn"], _styleSheet["btn-line-submit"], { background: '#de562f', 'margin-top': '40px' }]}>确认提交</Button>
          </View>
        </Form>
      </View>;
  }
};
Index = tslib_1.__decorate([inject("stores"), observer], Index);
export default Index;